<template>
  <div>
    <div class="right-title">
      <span>信息录入</span>
    </div>
    <div class="right-content1">
      <el-form :model="userRegister" status-icon :rules="rules" ref="userRegister" label-width="100px" class="demo-ruleForm">
        <el-form-item label="姓名" prop="userName">
          <el-input v-model="userRegister.userName"></el-input>
        </el-form-item>
        <el-form-item label="学号" prop="userId">
          <el-input v-model="userRegister.userId"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="userPassword">
          <el-input v-model="userRegister.userPassword"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="userGender">
          <el-radio-group v-model="userRegister.userGender" prop="userGender">
            <el-radio label="男"></el-radio>
            <el-radio label="女"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="进入年份" prop="startYear">
          <el-select v-model="userRegister.startYear" placeholder="请选择进入年份">
            <el-option label="2021" value="2021"></el-option>
            <el-option label="2020" value="2020"></el-option>
            <el-option label="2019" value="2019"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="方向" prop="userDirection">
          <el-select v-model="userRegister.userDirection" placeholder="请选择方向">
            <el-option label="CPU" value="CPU"></el-option>
            <el-option label="操作系统" value="操作系统"></el-option>
            <el-option label="人工智能" value="人工智能"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="E-mail" prop="userEmail">
          <el-input v-model="userRegister.userEmail"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="newUsers('userRegister')">提交</el-button>
          <el-button @click="resetForm('userRegister')">重置</el-button>
          <el-button type="primary" @click="downloadResume">下载表格</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import config from '../../action/config.js';

export default {
  name:"studentInformation",

  data() {
    return{
      userRegister: {
        startYear:'',
        userDirection:'',
        userEmail:'',
        userGender:'',
        userId:'',
        userName:'',
        userPassword:'',
      },
      rules: {
        userName:[
          { required: true, message: '请输入姓名！', trigger: 'blur'}
        ],
        userId: [
          { required: true, message: '请输入学号！', trigger: 'blur' },
          { min: 10, max: 10, message: '长度为10个字符', trigger: 'blur' }
        ],
        userPassword: [
          { required: true, message: '请输入密码！', trigger: 'blur'}
        ],
        startYear:[
          { required: true, message: '请选择进入年份！', trigger: 'blur'}
        ],
        userDirection:[
          { required: true, message: '请选择方向！', trigger: 'blur'}
        ],
        userGender:[
          { required: true, message: '请选择性别！', trigger: 'blur'}
        ],
        userEmail:[
          { required: true, message: '请输入邮箱地址!', trigger: 'blur' },
          { type: 'email', message: '请输入正确的邮箱地址!', trigger: ['blur', 'change'] }
        ]
      }
    };
  },
  methods:{
    newUsers(formName) {
      // let token = sessionStorage.getItem('token');

      let params={
        startYear:this.userRegister.startYear,
        userDirection:this.userRegister.userDirection,
        userEmail:this.userRegister.userEmail,
        userGender:this.userRegister.userGender,
        userId:this.userRegister.userId,
        userName:this.userRegister.userName,
        userPassword:this.userRegister.userPassword,
      }
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$axios.$post(config.api.post.Manager.newUser,params,{headers:{ORDER_ACCESS_TOKEN:localStorage.getItem('token')}})
            .then((response)=>{
              this.newUsers = response.data;
              console.log(response.code);
              if(response.code == 0){
                console.log("提交成功");
                this.$message({
                  message: '提交成功！',
                  type: 'success'
                });
              }else if(response.code == -1){
                console.log("提交失败");
                this.$message.error(response.message);
              }
            });
        }else {
          this.$message.error("信息输入有误或为空！");
          return false;
        }
      });
    },
    downloadResume(){
      window.location.href="./大一新生信息收集表.xlsx"
    },
    // submitForm(formName) {
    //   this.$refs[formName].validate((valid) => {
    //     if (valid) {
    //       alert('提交成功!');
    //     } else {
    //       console.log('提交失败!!');
    //       return false;
    //     }
    //   });
    // },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  },
}
</script>
<style>
  .right-title{
    height: 60px;
    width: 100%;
    background-color: #8B4646;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    box-shadow: 2px 2px 2px #3a3939b3;
  }
  .right-title span{
    font-size:20px;
    line-height: 60px;
    font-weight: 450;
    color:#fff;
    margin-left: 4%;
  }
  .right-content1{
    width: 50%;
    height: 550px;
    margin: 0 auto;
    margin-top: 46px;
  }
  .demo-ruleForm{
    padding-left: 0 !important;
  }
  .el-input{
    width: 76%;
  }
  .el-select{
    width: 69%;
  }
  .el-select .el-input.is-focus .el-input__inner{
    border-color: #9f8e73 !important;
  }
  .el-input.is-active .el-input__inner, .el-input__inner:focus{
    border-color: #9f8e73 !important;
  }
  .el-radio__input.is-checked .el-radio__inner{
    border-color: #9f8e73;
    background: #9f8e73;
  }
  .el-radio__input.is-checked+.el-radio__label{
    color: #9f8e73;
  }
  .el-radio__inner:hover{
    border-color: #9f8e73;
  }
  .el-select-dropdown__item.selected{
    color: #9f8e73;
  }
  /* 提交按钮 */
  .el-button--primary{
    border-color: #9f8e73;
    background: #9f8e73;
    margin-left: 26%;
  }
  .el-button--primary.is-active, .el-button--primary:hover{
    border-color: #9f8e73;
    background: #9f8e73a6;
  }
  .el-button--primary.is-active, .el-button--primary:active{
    border-color: #9f8e73;
    background: #9f8e73;
  }
  .el-button--primary.is-active, .el-button--primary:focus{
    border-color: #9f8e73;
    background: #9f8e73;
  }
  /* 重置按钮 */
  .el-button:active{
    border-color: #9f8e73;
    color: #9f8e73;
  }
  .el-button--default:focus, .el-button--default:hover{
    border-color: #9f8e73;
    color: #9f8e73;
    background: rgba(202, 192, 171, 0.32);
  }
</style>